<template>
  <div class="account-create">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <span>开设新账户</span>
        </div>
      </template>
      
      <el-form 
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="create-form"
      >
        <el-form-item label="开户人姓名" prop="accountName">
          <el-input v-model="form.accountName" placeholder="请输入开户人姓名" />
        </el-form-item>

        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="form.idCard" placeholder="请输入身份证号" />
        </el-form-item>

        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号码" />
        </el-form-item>

        <el-form-item label="初始存入金额" prop="initialDeposit">
          <el-input-number 
            v-model="form.initialDeposit"
            :min="0"
            :precision="2"
            :step="100"
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="开户地址" prop="address">
          <el-input 
            v-model="form.address"
            type="textarea"
            placeholder="请输入开户地址"
            :rows="3"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交开户</el-button>
          <el-button @click="$router.push('/account/list')">返回列表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

export default {
  name: 'AccountCreate',
  setup() {
    const router = useRouter()
    const formRef = ref(null)

    const form = reactive({
      accountName: '',
      idCard: '',
      phone: '',
      initialDeposit: 0,
      address: ''
    })

    const rules = {
      accountName: [
        { required: true, message: '请输入开户人姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
      ],
      idCard: [
        { required: true, message: '请输入身份证号', trigger: 'blur' },
        { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ],
      initialDeposit: [
        { required: true, message: '请输入初始存入金额', trigger: 'blur' },
        { type: 'number', min: 0, message: '金额必须大于等于0', trigger: 'blur' }
      ],
      address: [
        { required: true, message: '请输入开户地址', trigger: 'blur' },
        { min: 5, max: 200, message: '长度在 5 到 200 个字符', trigger: 'blur' }
      ]
    }

    const handleSubmit = async () => {
      if (!formRef.value) return
      
      try {
        await formRef.value.validate()
        // TODO: 实现开户逻辑
        ElMessage.success('开户成功！')
        router.push('/account/list')
      } catch (error) {
        console.error('表单验证失败:', error)
      }
    }

    return {
      formRef,
      form,
      rules,
      handleSubmit
    }
  }
}
</script>

<style scoped>
.account-create {
  padding: 20px;
}

.form-card {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.create-form {
  margin-top: 20px;
}

:deep(.el-form-item__label) {
  font-weight: bold;
}
</style> 